<template>
  <div  class="bs-Tree">
    <el-tree :data="data"
             :props="defaultProps"
             :default-expand-all="false"
             @node-click="handleNodeClick"
             :render-content="renderContent"/>
  </div>
</template>
<script>
  export default {
    props: {
      data: {
        type: Array,
        required: true
      },
    },
    data() {
      return {
        height: document.documentElement.clientHeight - 94.5 + 'px;',
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    },
    methods: {
      handleNodeClick(data) {
        this.$emit('handleTreeClick', data)
      },
      renderContent(h, { node, data, store }) {
        return (<span> <svg-icon icon-class={data.iconSkin}/> <span style='margin-left:5px;'>{node.label}</span></span>)
      }
    }
  }
</script>
<style scoped>
  .bs-Tree{
    overflow: auto;
    height: calc(100vh - 120px);
    border-right: 1px solid #e0e0e0;
    background: #fafafa;
  }
</style>
<style>
  .el-tree>.el-tree-node {
    min-width: 100%;
    display: inline-block;
  }
</style>


